<template>
  <div class="my-box">
    <div class="p-in30 oneBg" style="padding-bottom: 230rpx;">
      <div>
        <div class="w-50 mt40" style="float: right;">
          <div style="float: right;">
            <img class="icon-img" src="@/static/my/customer_service.png" alt="" @click="toService">
            <img class="icon-img" src="@/static/my/setting.png" alt="" @click="toSetting">
          </div>
        </div>
      </div>
      <div class="flex-nowrap" style="width: 100%;">
        <img class="avatar" src="@/static/my/head.jpg" alt="">
        <div class="column-between">
          <text class="mblo20">这里是昵称</text>
          <div class="flex-nowrap">
            <span class="iconfont icon-xianxingjiangpai p-in20 iconfontFontSize"></span>
            <div class="hadeTxte row-center utils-text" style="color: white; font-size: 25rpx;">
              初级博客
            </div>
          </div>
        </div>
      </div>
      <div class="mt30 row-noBe "
        style="border-radius: 40rpx;background:#FF9D56;;border-radius: 40rpx;align-items: center;justify-content: space-around;position: relative;">
        <div style="width: 150rpx;height: 150rpx;">
          <image src="/static/homeImage/goods.png" class="content"></image>
        </div>
        <div class="column" style="align-items: center;">
          <text class="utils-text" style="">开通商家VIP权益</text>
          <text class="utils-text m-bl15" style="font-size: 26rpx;">即可享受 多重权益</text>
        </div>
        <div class="shoppingVip row-center">
          ¥999/月
        </div>
      </div>
      <div style="position: relative;">
        <div style="position: absolute;top: 40rpx;border-radius: 20rpx;background: #ffffff;width: 100%;"
          class="p-in20 column p-block-list">
          <text class="text-demo lg">基础任务</text>
          <div class="flex-nowrap m-bl15 p-block10" style="background: #FFF2F3;border-radius: 20rpx;">
            <div class="radius-50 row-center m-in20"
              style="background: white;width: 80rpx;height: 80rpx;border: 1rpx solid red;">
              <image src="/static/homeImage/doudou.png" style="width: 45rpx;height: 45rpx;"></image>
            </div>
            <text>看视频获得黄金豆(0/3)</text>
            <div class="row-center task m-in20">
              去签到
            </div>
          </div>
          <div class="flex-nowrap m-bl15 p-block10" style="background: #FFF2F3;border-radius: 20rpx;">
            <div class="radius-50 row-center m-in20"
              style="background: white;width: 80rpx;height: 80rpx;border: 1rpx solid red;">
              <image src="/static/tabbar/linghongbao_a.png" style="width: 45rpx;height: 45rpx;"></image>
            </div>
            <text>看视频获得消费值(0/3)</text>
            <div class="row-center task m-in20">
              去观看
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-in30" style="background:#F7F7F7;padding-top:190rpx;">
      <div class="row-noBe">
        <div class="p-in20" style="width: 334rpx;height: 304rpx;background: #FFC7C9;border-radius: 10rpx;">
        </div>
        <div class="column-between">
          <div class="p-in20" style="width: 334rpx;height: 142rpx;background: #FFC7C9;border-radius: 20rpx;">
          </div>
          <div class="p-in20" style="width: 334rpx;height: 142rpx;background: #FFC7C9;border-radius: 20rpx;">
          </div>
        </div>
      </div>
      <div class="mt20"
        style="height: 188rpx;background: linear-gradient(90deg, #FFEBE9 0%, #F5DCDC 51%, #FBBCBC 100%);border-radius: 20rpx;">
      </div>
      <div class="mt20 p-in20 d-column p-block-list" style="background: #FFFFFF;border-radius: 10rpx;">
        <text class="text-demo lg">常用功能</text>
        <div class="row-noBe">
          <div class="column-between">
            <div class="m-bl25" style="padding: 22rpx;background:#D9F4F9;border-radius: 40rpx;">
              <span class="iconfont icon-gongzuotai-gerenmingpian iconfont-icon" style="color: #35CEE6;"></span>
            </div>
            <text>个人中心</text>
          </div>
          <div class="column-between">
            <div class="m-bl25" style="padding: 22rpx;background:#FFF2EB;border-radius: 40rpx;">
              <span class="iconfont icon-tixianchongzhi iconfont-icon" style="color: #FF9550;"></span>
            </div>
            <text>道具充值</text>
          </div>
          <div class="column-between">
            <div class="m-bl25" style="padding: 22rpx;background:#FFEEF4;border-radius: 40rpx;">
              <span class="iconfont icon-wodexiaoxi iconfont-icon" style="color:#FF8798;"></span>
            </div>
            <text>我的消息</text>
          </div>
          <div class="column-between">
            <div class="m-bl25" style="padding: 22rpx;background:#F2F0FF;border-radius: 40rpx;">
              <span class="iconfont icon-fabusekuai iconfont-icon" style="color: #8E7AFF;"></span>
            </div>
            <text>我的发布</text>
          </div>
          <div class="column-between">
            <div class="m-bl25" style="padding: 22rpx;background:#F0F5FF;border-radius: 40rpx;">
              <span class="iconfont icon-dingdan iconfont-icon" style="color: #65A1FF;"></span>
            </div>
            <text>我的订单</text>
          </div>
        </div>
      </div>
      <div class="mt20 p-in20 d-column p-block-list" style="background: #FFFFFF;border-radius: 10rpx;">
        <text class="text-demo lg">我的服务</text>
        <div class="row-beteeen1">
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-shimingrenzheng" style="color: #35D2E8;font-size: 59rpx;"></span>
            </div>
            <text>实名认证</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-zu" style="color: #FF9C58;font-size: 59rpx;"></span>
            </div>
            <text>我的团队</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-hezi" style="color: #FD5D89;font-size: 59rpx;"></span>
            </div>
            <text>我的盒柜</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-shoucangjia" style="color: #927FFE;font-size: 59rpx;"></span>
            </div>
            <text>收藏夹</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-shangjia" style="color: #00D490;font-size: 59rpx;"></span>
            </div>
            <text>申请商家</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-icon-person-hezuo1" style="color: #FF6158;font-size: 59rpx;"></span>
            </div>
            <text>合伙人</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-qudaofengxianhuise" style="color: #2CADFE;font-size: 59rpx;"></span>
            </div>
            <text>渠道合作</text>
          </div>
          <div class="column-between" style="width: 140rpx;">
            <div class="m-bl25" style="padding-inline: 20rpx;background:#FFFFFF;border-radius: 40rpx;">
              <span class="iconfont icon-yaoqinghaoyou" style="color: #FFB831;font-size: 59rpx;"></span>
            </div>
            <text>邀请好友</text>
          </div>
        </div>
      </div>
      <!-- #ifdef H5 -->
      <div style="width: 100%;height: 150rpx;">
      </div>
      <!-- #endif -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyView',
  data() {
    return {

    }
  },
  methods: {
    // 点击前往设置页面
    toSetting() {
      // uni.navigateTo({
      //   url: '/pages/user/components/user_setting'
      // })
    },
    // 点击前往客服页面
    toService() {
      console.log(12312313123);
      // uni.navigateTo({
      //   url: '/pages/user/components/customer_service'
      // });
    },
  }
}
</script>

<style lang="scss" scoped>
.my-box {
  min-height: 100vh;
}

.avatar {
  width: 69px;
  height: 69px;
  border-radius: 50%;
}

.icon-img {
  width: 24px;
  height: 24px;
}

.iconfontFontSize {
  font-size: 50rpx;
}

.iconfont-icon {
  font-size: 53rpx;
}

.utils-text {
  font-size: 36rpx;
  font-family: PingFangSC;
  font-weight: 500;
  font-style: italic;
  color: #FEFEFE;
  background: linear-gradient(-6deg, #E5E8F8 0%, #F5F8FB 52.5634765625%, #F5F8FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.oneBg {
  padding-top: 5%;
  background: linear-gradient(39deg, #EE7E8E, #EF7E8E, #F1A876);

  .hadeTxte {
    width: 133rpx;
    height: 46rpx;
    background: linear-gradient(0deg, #F5B488, #ED7D31);
    border-radius: 23rpx;
  }

  .shoppingVip {
    width: 146rpx;
    height: 55rpx;
    background: #161616;
    border-radius: 28rpx;
    font-size: 26rpx;
    font-family: PingFangSC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .task {
    width: 156rpx;
    height: 52rpx;
    background: linear-gradient(90deg, #ED7B2D 0%, #EB5D2A 100%);
    border-radius: 26rpx;
    font-size: 28rpx;
    font-family: PingFangSC;
    font-weight: 400;
    color: #FFFFFF;
  }
}
</style>